<template>
  <view class="content">
    <view class="menus">
      <view :class="['item',menuIndex==index?'selected':'']" v-for="(item,index) in menus" @tap="changeMenu(index)">
        <text>{{item.name}}</text>
      </view>
    </view>
    <view class="type" v-if="menuIndex==0">
      <text :class="['text1',carIndex==index?'selected':'']"  v-for="(item,index) in list" @tap="changeCar(index)">{{item.name}}</text>
    </view>
    <view class="type" v-if="menuIndex==1">
      <text :class="['text1',carIndex==index?'selected':'']"  v-for="(item,index) in list" @tap="changeCar(index)">{{item.name}}</text>
    </view>
    <!-- 展示图 -->
    <view class="imgs" v-if="menuIndex==0">
      <swiper @change="swiperChange" :current="carIndex" style="width:100%;height: 175px;">
        <swiper-item style="width:100%;display: flex;justify-content: center" v-for="(item, index) in list" :key="index">
          <view clas="car-item">
            <image :src="domain+item.zsimage" mode="heightFix" style="height: 180rpx"></image>
            <view class="info">
              <view class="length">
                <view>
                  <text>载方</text>
                  <text>{{getRandomNumber()}}~{{getRandomNumber()}}立方</text>
                </view>
                <view>
                  <text>载重</text>
                  <text> {{(Math.random() * 0.9+0.1).toFixed(1)}}~{{(Math.random() * 0.9+0.1).toFixed(1)}}吨</text>
                </view>
              </view>
              <view class="tag">
                <text v-for="(item,index) of tagList" :key="index">{{item}}</text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <!-- <view class="desc">
        <view class="info1">
          <text class="text1">载方</text>
          <text class="text2">2.4~4立方</text>
        </view>
        <view class="info2">
          <text class="text1">载重</text>
          <text class="text2">0.5~8吨</text>
        </view>
      </view> -->
      <view class="marks">
        <text class="text1" v-for="item in list[carIndex].tags">{{item}}</text>
      </view>
    </view>
    <view class="imgs2" v-if="menuIndex==1">
      <view class="left">
        <image src="/static/1.png" mode="heightFix"></image>
        <view class="desc">
          <text>车型：{{list[carIndex].name}}</text>
        </view>
      </view>
      <view class="right">
        <image src="/static/2.png" mode="heightFix"></image>
        <view class="xc">
          <text>如何选车 ></text>
        </view>
      </view>
    </view>
    <view class="imgs3" v-if="menuIndex==2">
      <view class="info1">
        <text>找{{ccList[ccIndex].name}}以下车长</text>
      </view>
      <view class="info2">
        <view class="left">
          <text>车长</text>
        </view>
        <view class="right">
          <text class="item" :class="{
            selected:ccIndex == index
          }" v-for="(item,index) of ccList" :key="index" @tap="changeCc(index)">{{item.name}}</text>
        </view>
      </view>
      <view class="info2">
        <view class="left">
          <text>车型</text>
        </view>
        <view class="right">
          <text :class="['item',cxIndex==index?'selected':'']" v-for="(item,index) in list" @tap="changeCx(index)">{{item.name}}</text>
        </view>
      </view>
    </view>
    <!-- 地址选择 -->
    <view class="addr" >
      <view @tap="goNext('/pages/sh/edit1')" class="addr2">
        <view  style="background: #333;flex-shrink: 0" class="flag">
          <text>装</text>
        </view>
        <input v-model="starAddr.startaddr" placeholder="输入装货地估价" disabled  />
      </view>
      <view class="jh">
        <view class="iconfont icon-jiaohuan icon"></view>
      </view>
      <view @tap="goNext('/pages/sh/edit2')" class="addr2">
        <view style="flex-shrink: 0" class="flag">
          <text>卸</text>
        </view>
        <input v-model="endAddr.endaddr" placeholder="输入卸货地估价" disabled  />
      </view>
      <view class="cz">
        <view class="left" @tap="show=true">
          <image class="img1" src="/static/sh/yy.png" mode="heightFix"></image>
          <text class="text1" v-if="yytime==''">{{menuIndex===0 || menuIndex===2?'预约用车':'选择搬家时间'}}</text>
          <text class="text2" v-else>{{yytime}}</text>
          <image class="img2" src="/static/sh/yjt2.png" mode="heightFix"></image>
        </view>
        <view v-if="false" class="right">
          <text class="text1">常用路线</text>
          <text class="text2">|</text>
          <text class="text3">加途经点</text>
        </view>
      </view>
      <view class="price">
        <view class="left">
          <text class="text1">￥</text>
          <text class="text2">{{12}}</text>
          <text class="text3">起</text>
        </view>
        <view class="right">
          <view class="btn" @tap="goXd1()">
            <text v-if="menuIndex===2">现在用车</text>
            <text v-else>下一步</text>
          </view>
        </view>
      </view>
    </view>
    <view class="addr-bj" v-if="false">
      <view class="addr1">
        <view class="flag">
          <text>装</text>
        </view>
        <input placeholder="您从哪里搬出" />
        <text class="xzlc">楼层</text>
      </view>
      <view class="jh">
        <view class="iconfont icon-jiaohuan icon"></view>
      </view>
      <view class="addr2">
        <view class="flag">
          <text>卸</text>
        </view>
        <input placeholder="您搬到那哪里去(支持跨域)" />
        <text class="xzlc">楼层</text>
      </view>
      <view class="cz">
        <view class="left">
          <image class="img1" src="/static/sh/yy2.png" mode="heightFix"></image>
          <text class="text1">选择搬家时间</text>
        </view>
        <view class="right">
          <image class="img1" src="/static/sh/mobile.png" mode="heightFix"></image>
          <text class="text1">填写联系电话</text>
        </view>
      </view>
      <view class="price">
        <view class="left">
          <text class="text1">￥</text>
          <text class="text2">12</text>
          <text class="text3">起</text>
        </view>
        <view class="right">
          <view class="btn">
            <text>下一步</text>
          </view>
        </view>
      </view>
    </view>
    <view class="addr" v-if="false">
      <view class="addr1">
        <view class="flag">
          <text>装</text>
        </view>
        <text class="text1" @tap="goNext('/pages/sh/edit1?lat='+lat+'&lng='+lng+'&addr='+startaddr)">{{startaddr}}</text>
        <image src="/static/sh/yjt.png" mode="heightFix"></image>
      </view>
      <view class="jh">
        <view class="iconfont icon-jiaohuan icon"></view>
      </view>
      <view class="addr2">
        <view class="flag">
          <text>卸</text>
        </view>
        <input v-model="endaddr" placeholder="输入卸货地估价" disabled @tap="goNext('/pages/sh/edit2')" />
      </view>
      <view class="cz">
        <view class="left">
          <image class="img1" src="/static/sh/yy.png" mode="heightFix"></image>
          <text class="text1">预约用车</text>
          <image class="img2" src="/static/sh/yjt2.png" mode="heightFix"></image>
        </view>
        <view class="right">
          <text class="text1">常用路线</text>
          <text class="text2">|</text>
          <text class="text3">加途经点</text>
        </view>
      </view>
      <view class="use">
        <view class="btn" @tap="goXd1()">
          <text>现在用车</text>
        </view>
      </view>
    </view>
    <view class="nav1">
      <image src="/static/sh/bg1.png" mode="widthFix"></image>
    </view>
    <view class="navs2">
      <image src="/static/sh/nav1.png" mode="widthFix"></image>
      <image src="/static/sh/nav2.png" mode="widthFix"></image>
      <image src="/static/sh/nav3.png" mode="widthFix"></image>
      <image src="/static/sh/nav4.png" mode="widthFix"></image>
    </view>

    <!-- 预约时间 -->
    <u-datetime-picker
        :show="show"
        v-model="value1"
        :minDate="1587524800000"
        :maxDate="1786778555000"
        mode="datetime"
        @cancel="show=false"
        @close="show=false"
        @confirm="qrYytime"
        :closeOnClickOverlay="true"
    ></u-datetime-picker>
  </view>
</template>

<script>
import { domain } from '@/common/api.js'
import { timestampToTime2 } from'@/common/utils.js'
import {diffDistance} from "../../utils";
import request from "../../common/request";
export default {
  data() {
    return {
      starAddr:{},
      endAddr:{},
      location:{},
      domain: domain,
      //当前经纬度
      lat: '',
      lng: '',
      city: '',//城市
      //开始地址
      startaddr: '',
      lat1: '',
      lng1: '',
      contacts1: '',
      mobile1: '',
      houseNo1: '',
      //结束地址
      endaddr: '',
      lat2: '',
      lng2: '',
      contacts2: '',
      mobile2: '',
      houseNo2: '',
      //预约时间
      yytime: '',
      show: false,
      value1: Number(new Date()),

      menuIndex: 0,//选中的菜单
      menus: [
        {id:1,name:'送货'},
        {id:2,name:'搬家'},
        {id:3,name:'长途大车'},
      ],
      //车辆
      carIndex: 0,
      list: [],
      //车长
      ccIndex: 0,
      ccList: [],
      //车型
      cxIndex: 0,
      cxList: [],
      tagList:['拆座','含支撑架','绑带']
    }
  },
  onLoad() {
    //获取车辆
    this.getCar()
    this.getCx()
    //获取经纬度和城市
    // this.getAddr()
  },
  onShow() {
    console.log(this.address1)
    if (Object.keys(this.address1)){
      this.starAddr = this.address1;
    }
    if (Object.keys(this.$store.state.address2)){
      this.endAddr = this.$store.state.address2;
    }
    this.location = uni.getStorageSync('location')
    this.useLocation = uni.getStorageSync('endLocation') || {}
  },
  computed:{
    address1(){
      return this.$store.state.address1
    }
  },
  methods: {
    getCx(){
      request({
        url:'/d/car/xcList',
        isAuth:false
      }).then(res=>{
        this.ccList = res.data;
      })
    },
    swiperChange(e){
      this.carIndex = e.detail.current;
    },
    getRandomNumber(num=5) {
      // 生成 0 到 4 之间的随机数
      var randomNumber =(Math.random() * num).toFixed(1);
      // 返回 1 到 5 之间的随机数
      return randomNumber + 1;
    },
    //获取车辆
    async getCar(){
      let type = this.menus[this.menuIndex].id
      let data = await this.$request({
        url: '/d/car/typeList',
        data: {
          type: type
        }
      });
      if(type=='1' || type=='2'){
        this.list = data.data
        console.log(data)
      }else if(type=='3'){
        this.ccList = data.data.ccList
        this.cxList = data.data.cxList
      }
    },
    //获取经纬度和城市
    getAddr(){
      //获取经纬度和城市
      let lat = uni.getStorageSync('lat')
      let lng = uni.getStorageSync('lng')
      let city = uni.getStorageSync('city')
      let startaddr = uni.getStorageSync('startaddr')
      if(!lat || !lng || !city || !startaddr){
        this.getLocation()
      }else{
        this.lat = lat
        this.lng = lng
        this.city = city
        this.startaddr = startaddr
      }
    },
    //切换菜单
    changeMenu(index){
      if(this.menuIndex==index) return
      this.menuIndex = index

    },
    //切换车辆
    changeCar(index){
      if(this.carIndex==index) return
      this.carIndex = index
    },
    //切换车长
    changeCc(index){
      if(this.ccIndex==index) return
      this.ccIndex = index
    },
    //切换车型
    changeCx(index){
      if(this.cxIndex==index) return
      this.cxIndex = index
    },
    //跳转
    goNext(url){
      uni.navigateTo({
        url:url
      })
    },
    //获取定位
    getLocation(){
      let that = this
      uni.getLocation({
        type: 'gcj02',
        success: function(res) {
          //缓存经纬度
          uni.setStorageSync('lat',res.latitude)
          uni.setStorageSync('lng',res.longitude)

          that.lat = res.latitude
          that.lng = res.longitude

          //获取城市
          that.loadCity(res.latitude,res.longitude)
        },
        fail: function(err) {
          console.log(err)
        }
      });
    },
    //根据经纬度获取城市名称
    loadCity(lat,lng) {
      let that = this
      let key = 'WBKBZ-ZRRW2-BLGU3-C2P2I-HNPVT-SHF5W';
      uni.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng + '&key=' + key,
        method: "GET",
        success(res) {
          let data = res.data; //获取到所有定位的数据
          let cityName = res.data.result.address_component.city
          //去掉市
          if(cityName[cityName.length-1] == '市'){
            cityName = cityName.slice(0, -1)
          }
          uni.setStorageSync('city',cityName)
          uni.setStorageSync('startaddr',data.result.address)
          that.city = cityName
          that.startaddr = data.result.address
        },
        fail(err) {
          console.log(err)
        }
      })
    },

    //确认预约时间
    qrYytime(e){
      let time = timestampToTime2(e.value)
      this.yytime = time
      this.show = false
    },
    //去订单确认
    async goXd1() {
      //验参
      if (!Object.keys(this.starAddr).length) {
        uni.showToast({
          icon: "none",
          title: "请选择装货地址"
        })
        return
      }
      if (!Object.keys(this.endAddr).length) {
        uni.showToast({
          icon: "none",
          title: "请选择卸货地址"
        })
        return
      }
      if (!this.yytime) {
        uni.showToast({
          icon: "none",
          title: "请选择预约时间"
        })
        return
      }
      let distance = await diffDistance(this.$jsonp, `${this.starAddr.lat1},${this.starAddr.lng1}`, `${this.endAddr.lat2},${this.endAddr.lng2}`)
      this.$store.commit('setDeliverGoods', {
        ...this.starAddr,
        ...this.endAddr,
        type: 1,
        distance:distance/1000,
        type_id: this.list[this.carIndex].id,
        yytime: this.yytime
      })
      // parseInt(new Date(this.yytime).getTime() / 1000)
      if (this.menuIndex===0){
        uni.navigateTo({
          url: "/pages/qr-order/qr-order1?params="
        })
      }else if (this.menuIndex===1){
        uni.navigateTo({
          url: "/pages/qr-order/qr-order2?params="
        })
      }else if (this.menuIndex===2) {
        this.$store.commit('setDeliverGoods', {
          ...this.$store.state.deliverGoods,
          type:3,
          xc_id:this.ccList[this.ccIndex].id
        })
        let data = await this.$request({
          url: '/d/order/add',
          method: 'POST',
          data: this.$store.state.deliverGoods
        });
        //提示
        uni.showToast({
          icon: "success",
          title: "呼叫成功"
        })
      }

    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding-bottom: 100rpx;
  .tag{
    display: flex;
    align-items: center;
    gap:11rpx;
    text{
      height: 54rpx;
      background: #F4F4F4;
      padding: 0 32rpx;
      display: flex;
      align-items: center;
      border-radius: 8rpx;
      border: 1px solid #BBBBBB;
      font-weight: 400;
      font-size: 24rpx;
      margin-top: 36rpx;
      color: #666666;
    }
  }
  .length{
    display: flex;
    align-items: center;
    gap:27rpx;
    view{
      display: flex;
      align-items: center;
      text:last-child{
        font-weight: bold;
        font-size: 24rpx;
        margin-left: 6rpx;
        color: #222222;
      }
      text:first-child{
        font-weight: 400;
        font-size: 22rpx;
        color: #888888;
      }
    }
  }
  .car-item{
    width: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .info{
      display: flex;
      flex-direction: column;

    }
  }
  .menus{
    width: 100%;
    height: 80rpx;
    padding-top: 20rpx;
    background-color: #6C45D0;
    display: flex;
    color: #fff;
    .item{
      width: 200rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: 600;
      letter-spacing: 1rpx;
    }
    .selected{
      // background-color: #fff;
      background-image: url('/static/sh/bg2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      color: #6C45D0;
      border-radius: 10rpx 10rpx 0 0;
      text{
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-thickness: 2px;
      }
    }
  }
  .type{
    padding: 30rpx 30rpx 20rpx;
    .text1{
      display: inline-block;
      line-height: 30rpx;
      padding: 5rpx 15rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      font-size: $uni-font-size-sm;
    }
    .selected{
      color: #6C45D0;
      background-color: #F5F0FF;
      border-radius: 20rpx;
    }
  }
  .imgs{
    padding: 0 50rpx;
    text-align: center;
    .desc{
      margin-top: 10rpx;
      display: flex;
      justify-content: center;
      font-size: $uni-font-size-sm;
      font-weight: 600;
      line-height: 40rpx;
      .info1{
        .text1{
          color: #B1B1B1;
        }
        .text2{
          margin-left: 10rpx;
        }
      }
      .info2{
        margin-left: 30rpx;
        .text1{
          color: #B1B1B1;
        }
        .text2{
          margin-left: 10rpx;
        }
      }
    }
    .marks{
      margin-top: 20rpx;
      font-size: $uni-font-size-sm;
      .text1{
        display: inline-block;
        width: 140rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        background-color: #F4F4F4;
        border: 1rpx solid #B4B4B4;
        color: #7E7E7E;
        border-radius: 8rpx;
        margin-right: 10rpx;
      }
    }
  }
  .imgs2{
    padding: 0 50rpx;
    display: flex;
    .left{
      image{
        height: 180rpx;
      }
      .desc{
        margin-top: 40rpx;
        line-height: 40rpx;
        text-align: center;
        color: #A9A9A9;
      }
    }
    .right{
      margin-left: 30rpx;
      image{
        height: 140rpx;
      }
      .xc{
        margin-top: 20rpx;
        line-height: 40rpx;
        color: #9981EF;
        font-size: $uni-font-size-sm;
        font-weight: bold;
      }
    }
  }
  .imgs3{
    padding: 30rpx;
    .info1{
      line-height: 40rpx;
      font-size: $uni-font-size-lg;
      font-weight: bold;
    }
    .info2{
      margin-top: 30rpx;
      line-height: 50rpx;
      display: flex;
      .left{
        width: 120rpx;
        color: #8B8B8B;
        font-weight: 600;
      }
      .right{
        .item{
          display: inline-block;
          width: 130rpx;
          height: 50rpx;
          background-color: #F4F4F4;
          border: 1rpx solid #EEEEEE;
          line-height: 50rpx;
          text-align: center;
          font-size: $uni-font-size-sm;
          font-weight: bold;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          border-radius: 10rpx;
        }
        .selected{
          background-color: #F5EEFF;
          color: #644ACE;
          border: 1rpx solid #644ACE;
        }
      }
    }
  }
  .addr{
    margin: 30rpx 20rpx;
    padding: 50rpx 30rpx 30rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .addr1{
      display: flex;
      height: 50rpx;
      line-height: 50rpx;
      .flag{
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: #000;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 50rpx;
      }
      .text1{
        margin-left: 40rpx;
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
      image{
        margin-top: 18rpx;
        margin-left: 20rpx;
        height: 20rpx;
      }
    }
    .jh{
      margin-top: 30rpx;
      .icon{
        font-size: 36rpx;
      }
    }
    .addr2{
      margin-top: 10rpx;
      display: flex;
      line-height: 50rpx;
      .flag{
        margin-top: 30rpx;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: #FE4949;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 50rpx;
      }
      input{
        margin-left: 20rpx;
        width: 100%;
        padding: 30rpx 20rpx;
        background-color: #EFF1F5;
        border-radius: 20rpx;
      }
    }
    .cz{
      margin-top: 40rpx;
      display: flex;
      line-height: 40rpx;
      .left{
        display: flex;
        color: #9282CE;
        .img1{
          margin-top: 5rpx;
          height: 30rpx;
        }
        .text1{
          margin-left: 15rpx;
        }
        .text2{
          margin-left: 15rpx;
          font-size: $uni-font-size-sm;
        }
        .img2{
          margin-top: 10rpx;
          margin-left: 8rpx;
          height: 20rpx;
        }
      }
      .right{
        margin-left: auto;
        color: #8F8F8F;
        .text1{

        }
        .text2{
          margin-left: 15rpx;
          margin-right: 15rpx;
        }
        .text3{}
      }
    }
    .price{
      margin-top: 30rpx;
      line-height: 100rpx;
      display: flex;
      .left{
        .text1{
          color: #F84C4B;
        }
        .text2{
          color: #F84C4B;
          font-size: 20px;
          font-weight: bold;
        }
        .text3{
          margin-left: 10rpx;
          color: #8F8F8F;
        }
      }
      .right{
        margin-left: auto;
        .btn{
          width: 380rpx;
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          color: #fff;
          background-color: #895FFF;
          border-radius: 20rpx;
        }
      }
    }
    .use{
      margin-top: 40rpx;
      .btn{
        width: 380rpx;
        height: 100rpx;
        margin: 0 auto;
        line-height: 100rpx;
        text-align: center;
        font-size: $uni-font-size-lg;
        font-weight: bold;
        color: #fff;
        background-color: #895FFF;
        border-radius: 20rpx;
      }
    }
  }
  .addr-bj{
    margin: 30rpx 20rpx;
    padding: 50rpx 30rpx 30rpx;
    background-color: #fff;
    border-radius: 30rpx;
    .addr1{
      display: flex;
      height: 50rpx;
      line-height: 50rpx;
      .flag{
        margin-top: 30rpx;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: #000;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 50rpx;
      }
      input{
        margin-left: 20rpx;
        width: 70%;
        padding: 30rpx 20rpx;
        background-color: #EFF1F5;
        border-radius: 20rpx;
      }
      .xzlc{
        margin-left: 20rpx;
        line-height: 110rpx;
        color: #989898;
      }
    }
    .jh{
      margin-top: 50rpx;
      .icon{
        font-size: 36rpx;
      }
    }
    .addr2{
      margin-top: 10rpx;
      display: flex;
      line-height: 50rpx;
      .flag{
        margin-top: 30rpx;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background-color: #FE4949;
        color: #fff;
        font-weight: bold;
        text-align: center;
        line-height: 50rpx;
      }
      input{
        margin-left: 20rpx;
        width: 70%;
        padding: 30rpx 20rpx;
        background-color: #EFF1F5;
        border-radius: 20rpx;
      }
      .xzlc{
        margin-left: 20rpx;
        line-height: 110rpx;
        color: #989898;
      }
    }
    .cz{
      margin-top: 40rpx;
      display: flex;
      line-height: 40rpx;
      .left{
        display: flex;
        .img1{
          margin-top: 5rpx;
          height: 30rpx;
        }
        .text1{
          margin-left: 15rpx;
        }
      }
      .right{
        margin-left: auto;
        display: flex;
        .img1{
          margin-top: 2rpx;
          height: 36rpx;
        }
        .text1{
          margin-left: 15rpx;
        }
      }
    }
    .price{
      margin-top: 30rpx;
      line-height: 100rpx;
      display: flex;
      .left{
        .text1{
          color: #F84C4B;
        }
        .text2{
          color: #F84C4B;
          font-size: 20px;
          font-weight: bold;
        }
        .text3{
          margin-left: 10rpx;
          color: #8F8F8F;
        }
      }
      .right{
        margin-left: auto;
        .btn{
          width: 380rpx;
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: $uni-font-size-lg;
          font-weight: bold;
          color: #fff;
          background-color: #895FFF;
          border-radius: 20rpx;
        }
      }
    }
  }
  .nav1{
    margin: 30rpx 20rpx 0;
    image{
      width: 100%;
    }
  }
  .navs2{
    margin: 20rpx 20rpx 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    image{
      width: 350rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
<style>
page{
  background-color: #FBFBFB;
}
</style>
